var topInput = document.getElementsByClassName('topInput')[0];
var submit = document.getElementsByClassName('submit')[0];
var spot = document.getElementsByClassName('spot')[0];
var listUl = document.getElementsByClassName('listUl')[0];
var WaitingLi = document.getElementsByClassName('Waiting');

var todoWaiting = [];
var todoDoing = [];
var todoFinished = [];

var html = '';
var index = 0;
var DoingIndex = [];
var Finished = [];

submit.onclick = () => {
    topInputAdd();
}

topInput.onkeyup = (e) =>{
    if(e.keyCode == 13){
        topInputAdd();
    }
}

topInputAdd = () => {
    if(!topInput.value.trim()){
        alert('请输入任务');
    }else {
        todoWaiting.push(topInput.value);
        topInput.value = '';
        addWaiting();
    }
}


addWaiting = () => {
    let html1 = '';
    for (let i = 0; i < todoWaiting.length ; i++) {
        let todo = todoWaiting[i];
        (function(index) {
            html1 += `
                <li class="Waiting" onclick="toDoing(${index})">
                    <span class="WaitingTop">Waiting...</span>
                    <span class="liText">${todo}</span>
                    <div class="delete">x</div>
                </li>
            `;
        })(i);
    }
    listUl.innerHTML = html1;
}

toDoing = (Index) => {
    DoingIndex.push(Index)
    let html1 = '';
    for (let i = 0; i < todoWaiting.length ; i++) {
        let flog = 0;
        let todo = todoWaiting[i];
                (function (index) {
                    for (let doingIndex of DoingIndex) {
                        if (i == doingIndex) {
                            html1 += `
                            <li class="Doing" onclick="tofinish(${index})">
                                <span class="Doing">Doing...</span>
                                <span class="liText">${todo}</span>
                                <div class="delete">x</div>
                            </li>
                        `;
                            flog = 1;
                        }
                    }
                    if(flog == 0){
                        if(i == index){
                            html1 += `
                            <li class="Doing" onclick="tofinish(${index})">
                                <span class="Doing">Doing...</span>
                                <span class="liText">${todo}</span>
                                <div class="delete">x</div>
                            </li>
                        `;
                        }
                        else {
                            html1 += `
                            <li class="Waiting" onclick="toDoing(${index})">
                                <span class="WaitingTop">Waiting...</span>
                                <span class="liText">${todo}</span>
                                <div class="delete">x</div>
                            </li>
                        `;
                        }
                    }
                })(i);
        }
    listUl.innerHTML = html1;
}